import { i18n } from '@/common/utils';
import { useEffect, useRef, useState } from 'react';
import { widgetManager } from '@/common/managers';
import { NMTopoBaseCommand, PointCommandProps } from './../type';
import { Box } from 'nextcae-base/src/dialogs/component/Box';
import CmdInteractor, { MeasureMode } from './CmdInteractor';
import { Button, Divider, Radio } from 'antd';
import { EntityPartType } from '@amcax/web-render';
import { LiItem } from './ListItem';
import styles from './styles.module.scss';

type PointInfo = {
  id: MeasureMode;
  label: string;
};
const results: {
  [key in EntityPartType]?: (length?: number) => PointInfo[];
} = {
  point: (length) =>
    length === 1
      ? [{ id: MeasureMode.POSITION, label: '位置' }]
      : length === 2
        ? [
            { id: MeasureMode.DIS, label: '距离' },
            { id: MeasureMode.ANGLEXY, label: '和XY平面的角度' },
            { id: MeasureMode.ANGLEYZ, label: '和YZ平面的角度' },
            { id: MeasureMode.ANGLEZX, label: '和XZ平面的角度' },
          ]
        : length === 3
          ? [
              { id: MeasureMode.ANGLE, label: '角度' },
              { id: MeasureMode.LEN, label: '总长度' },
            ]
          : [{ id: MeasureMode.LEN, label: '总长度' }],
  line: () => [
    { id: MeasureMode.LEN, label: '总长度' },
    {
      id: MeasureMode.LEN_SPLIT,
      label: '每段长度',
    },
  ],
};
// source
function Command({ onClose }: PointCommandProps) {
  const cmdRef = useRef<CmdInteractor>(null);
  const [showResult, setShowResult] = useState<number>(0);
  const [value, setValue] = useState<EntityPartType>(EntityPartType.point);
  useEffect(() => {
    widgetManager.hint('进入测量命令');
    cmdRef.current = new CmdInteractor(setShowResult, onClose);
    return () => {
      cmdRef.current?.destroy(true);
      cmdRef.current = null;
    };
  }, []);
  const style: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
  };
  useEffect(() => {
    if (value === EntityPartType.point) {
      cmdRef.current.pickType = [
        EntityPartType.point,
        EntityPartType.node,
        EntityPartType.element,
      ];
    } else {
      cmdRef.current.pickType = value;
    }
    cmdRef.current.init();
  }, [value]);
  const [selected, setSelected] = useState<PointInfo>(null);
  useEffect(() => {
    if (showResult) {
      setSelected(results[value](showResult)[0]);
    } else {
      cmdRef.current.setMeasureModel(null);
    }
  }, [showResult]);
  return (
    <Box
      title={i18n.t('Measure')}
      width='180px'>
      <>
        <div className={styles.result_content}>
          <Divider orientation='left'>选择</Divider>
          <Radio.Group
            className='mx-3 my-2'
            style={style}
            onChange={(e) => setValue(e.target.value)}
            value={value}
            options={[
              { value: EntityPartType.point, label: '点' },
              { value: EntityPartType.line, label: '线' },
            ]}
          />
        </div>
        <div className={styles.result_content}>
          <Divider orientation='left'>结果</Divider>
          <div className='mb-2 border-y min-h-10'>
            {!!showResult &&
              results[value](showResult).map((item, index) => {
                return (
                  <LiItem
                    hasBg={index % 2 !== 0}
                    key={item.id}
                    onClick={() => {
                      setSelected(item);
                      cmdRef.current.setMeasureModel(item.id);
                    }}
                    active={selected?.id === item?.id}>
                    {item.label}
                  </LiItem>
                );
              })}
          </div>
        </div>
        <div className='justify-end pr-5 pb-2 flex gap-2 border-t-[1px] pt-2'>
          <Button onClick={onClose}>取消</Button>
        </div>
      </>
    </Box>
  );
}
export const cmdMeasure: NMTopoBaseCommand = {
  id: 'cmdMeasure',
  icon: 'commands/tool/measure',
  label: 'Measure',
  create: (label: string, onClose: () => void) => {
    return (
      <Command
        title={i18n.t(label)}
        onClose={onClose}
      />
    );
  },
};